<template>
  <view class="tabTop">
    <view
      class="topItem"
      @click="
        showState.monthShow = !showState.monthShow;
        showState.timeShow = false;
      "
      ><p :class="{ blue: showState.monthShow }">按月份筛选</p>
      <IconFont
        class="topIcon"
        name="rect-down"
        v-if="!showState.monthShow"
      ></IconFont>
      <IconFont
        class="topIcon"
        name="rect-up"
        color="#0966FF"
        v-else
      ></IconFont>
    </view>
    <view
      class="topItem"
      @click="
        showState.timeShow = !showState.timeShow;
        showState.monthShow = false;
      "
      ><p :class="{ blue: showState.timeShow }">按时间段筛选</p>
      <IconFont
        class="topIcon"
        name="rect-down"
        v-if="!showState.timeShow"
      ></IconFont>
      <IconFont
        class="topIcon"
        name="rect-up"
        color="#0966FF"
        v-else
      ></IconFont>
    </view>
    <view class="chooseMonth" v-if="showState.monthShow">
      <view>
        <nut-date-picker
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          :is-show-chinese="true"
          :show-toolbar="false"
          type="year-month"
          @change="monthChange"
        ></nut-date-picker>
      </view>
      <view class="monthBtnBox">
        <nut-button type="default" style="width: 40%" @click="cancel"
          >重置</nut-button
        >
        <nut-button type="info" style="width: 40%" @click="choose"
          >确定</nut-button
        >
      </view>
    </view>
    <view class="chooseTime" v-if="showState.timeShow">
      <view class="timeChooseMain">
        <view class="mainTop">
          <view
            @click="chooseItem(item)"
            :class="{ mainItem: true, blueBorder: item.choose }"
            v-for="(item, i) in timeChooseList"
            :key="i"
            >{{ item.label }}</view
          >
        </view>
        <view class="mainTop">
          <view
            :class="{ mainBottomItem: true, blueBorder: diaTime.startTime }"
            @click="chooseStartAndEnd(1)"
            >{{ !diaTime.startTime ? "开始时间" : diaTime.startTime }}</view
          >
          <view class="gang">一</view>
          <view
            :class="{ mainBottomItem: true, blueBorder: diaTime.endTime }"
            @click="chooseStartAndEnd(2)"
            >{{ !diaTime.endTime ? "结束时间" : diaTime.endTime }}</view
          >
        </view>
      </view>
      <view class="monthBtnBox">
        <nut-button type="default" style="width: 40%" @click="timeCancel"
          >重置</nut-button
        >
        <nut-button type="info" style="width: 40%" @click="timeChoose"
          >确定</nut-button
        >
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { onMounted, ref, reactive, watch } from "vue";
import dayjs from "dayjs";

const minDate = ref(new Date(2020, 0, 1));
const maxDate = ref(new Date());
const currentDate = ref(new Date());
const monthRes = ref();
const timeValue = ref({
  starttime: dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
  endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});
const props = defineProps<{
  timeState: any;
  timeChooseList: any;
  dateShow: any;
  diaTime: any;
}>();

const showState = ref({
  monthShow: false,
  timeShow: false,
});
const emit = defineEmits<{
  (e: "choose", monRes: Array<string>);
  (e: "cancel");
  (e: "cleaning",itemName:string);
  (e: "timeChoose",timeValue:{starttime:string,endtime:string});
  (e: "chooseStartAndEnd",num:number);
  
}>();

//确定按钮(日期)
function choose() {
  showState.value.monthShow = false;
  emit("choose", monthRes.value);
}
//重置按钮（日期）
function cancel() {
  showState.value.monthShow = false;
  emit("cancel");
}
//选中按钮（时间）
function chooseItem(item: {
  name: "oneMonth";
  label: string;
  choose: boolean;
  start: string;
  end: string;
}) {
  emit("cleaning",item.name);
  item.choose = !item.choose;
  if (item.choose) {
    timeValue.value = {
      starttime: item.start,
      endtime: item.end,
    };
  } else {
    timeValue.value = {
      starttime: dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
      endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    };
  }
}
//重置按钮（时间）
function timeCancel() {
  showState.value.timeShow = false;
  emit("cancel");
}
//确定按钮（时间）
function timeChoose() {
  showState.value.timeShow = false;
  emit("timeChoose",timeValue.value);
}
//打开自定义弹框
function chooseStartAndEnd(num: number) {
  emit("chooseStartAndEnd",num);
}
function monthChange(res: {
  columnIndex: number;
  selectedOptions: { test: string; value: string };
  selectedValue: Array<string>;
}) {
  console.log(res, 88);
  // monthRes.value=res.selectedValue.join('-');
  monthRes.value = res.selectedValue;
}
</script>
<style lang="less">
.nut-picker {
  height: 400rpx !important;
}
.tabTop {
  display: flex;
  background: white;
  height: 96rpx;
  font-size: 24rpx;
  border-top: 1rpx solid rgb(228, 228, 228);
  //   line-height: 96rpx;
  color: #666666;
  width: 100%;
  position: relative;
  .blue {
    color: #0966ff;
  }
  .topItem {
    text-align: center;
    width: 50%;
    display: flex;
    justify-content: center;
    line-height: 96rpx;
    .topIcon {
      margin-top: 28rpx;
      margin-left: 10rpx;
      // padding-top: -40rpx;
    }
  }
  .chooseMonth {
    z-index: 10;
    height: 626rpx;
    width: 100%;
    position: absolute;
    bottom: -626rpx;
    background: white;
    box-shadow: 0 20rpx 40rpx #888888;
    // background: rgb(226, 226, 226);
    .monthBtnBox {
      padding-top: 20rpx;
      height: 150rpx;
      display: flex;
      justify-content: space-around;
      // background: red;
      border-top: 1rpx solid rgb(207, 207, 207);
    }
  }
  .chooseTime {
    z-index: 10;

    height: 348rpx;
    width: 100%;
    position: absolute;
    bottom: -348rpx;
    background: red;
    box-shadow: 0 20rpx 40rpx #888888;
    .timeChooseMain {
      height: 232rpx;
      background: rgb(230, 230, 230);
    }
    .monthBtnBox {
      padding-top: 20rpx;
      height: 116rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      background: white;
      border-top: 1rpx solid rgb(207, 207, 207);
    }
    .mainTop {
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      padding-top: 32rpx;
      .mainItem {
        background: #ffffff;
        box-sizing: border-box;
        /* 分割线 */
        border: 2rpx solid rgba(0, 0, 0, 0.06);
        width: 158rpx;
        height: 72rpx;
        border-radius: 88rpx;
        line-height: 72rpx;
        text-align: center;
        font-weight: 600;
        color: black;
      }
      .blueBorder {
        border: 2rpx solid #0966ff !important;
        background: rgba(9, 102, 255, 0.05) !important;
        color: #0966ff !important;
      }
    }
    .mainBottomItem {
      background: #ffffff;
      box-sizing: border-box;
      /* 分割线 */
      border: 2rpx solid rgba(0, 0, 0, 0.06);
      width: 332rpx;
      height: 72rpx;
      border-radius: 88rpx;
      line-height: 72rpx;
      text-align: center;
      font-weight: 600;
      color: #c4c4c4;
    }
    .gang {
      color: #c4c4c4;
      line-height: 72rpx;
    }
  }
}
</style>
